// src/pages/qualityStandard/StandardManage.vue
<template>
	<div class="standard-manage">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>质检标准管理</span>
					<el-button type="primary" size="small" @click="openDialog('add')">新增标准</el-button>
				</div>
			</template>

			<el-table :data="standardList" border stripe>
				<el-table-column prop="name" label="标准名称">
					<template #default="scope">
						<el-link type="primary" @click="viewItems(scope.row)" style="cursor:pointer">{{ scope.row.name
						}}</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="type" label="质检类型" />
				<el-table-column prop="version" label="版本号" width="100" />
				<el-table-column prop="status" label="发布状态" width="100" />
				<el-table-column label="质检项" width="260">
					<template #default="scope">
						<div v-for="(item, i) in scope.row.items" :key="i">
							{{ item.name }}（{{ item.method }}）
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteStandard(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="标准名称">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="质检类型">
					<el-select v-model="form.type">
						<el-option label="原材料质检" value="原材料质检" />
						<el-option label="成品质检" value="成品质检" />
					</el-select>
				</el-form-item>
				<el-form-item label="版本号">
					<el-input v-model="form.version" />
				</el-form-item>
				<el-form-item label="发布状态">
					<el-select v-model="form.status">
						<el-option label="发布" value="发布" />
						<el-option label="未发布" value="未发布" />
					</el-select>
				</el-form-item>

				<el-form-item label="质检项选择">
					<el-select v-model="form.items" multiple filterable placeholder="选择质检项" style="width: 100%">
						<el-option v-for="(item, index) in qualityItemList" :key="index"
							:label="item.name + '（' + item.method + '）'" :value="item.name" />

					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>

		<el-drawer v-model="drawerVisible" title="质检项详情" direction="rtl" size="40%">
			<el-table :data="currentDetailItems" border stripe>
				<el-table-column prop="name" label="名称" />
				<el-table-column prop="method" label="方法" />
				<el-table-column prop="requirement" label="要求" />
				<el-table-column prop="position" label="位置" />
				<el-table-column prop="aql" label="AQL策略" />
				<el-table-column prop="type" label="质检类型" />
			</el-table>
		</el-drawer>
	</div>
</template>

<script>
import { ref } from 'vue'
import { qualityItemList } from '@/store/itemStore.js'

export default {
	setup() {
		const standardList = ref([
			{
				name: '建筑材料质检标准 1',
				type: '成品质检',
				version: 'V2.0',
				status: '未发布',
				items: [{ name: '项目1', method: '热学测试' }, { name: '项目2', method: '热学测试' }]
			},
			{
				name: '建筑材料质检标准 2',
				type: '原材料质检',
				version: 'V1.0',
				status: '未发布',
				items: [{ name: '项目1', method: '化学分析' }, { name: '项目2', method: '视觉检测' }]
			},
			{
				name: '建筑材料质检标准 3',
				type: '成品质检',
				version: 'V3.0',
				status: '未发布',
				items: [{ name: '项目1', method: '化学分析' }, { name: '项目2', method: '力学检测' }]
			},
			{
				name: '建筑材料质检标准 4',
				type: '原材料质检',
				version: 'V3.0',
				status: '发布',
				items: [{ name: '项目1', method: '物理检测' }, { name: '项目2', method: '视觉检测' }]
			},
			{
				name: '建筑材料质检标准 5',
				type: '原材料质检',
				version: 'V1.0',
				status: '未发布',
				items: [{ name: '项目1', method: '化学分析' }, { name: '项目2', method: '物理检测' }]
			},
			{
				name: '建筑材料质检标准 6',
				type: '成品质检',
				version: 'V3.0',
				status: '发布',
				items: [{ name: '项目1', method: '力学检测' }, { name: '项目2', method: '视觉检测' }]
			},
			{
				name: '建筑材料质检标准 7',
				type: '成品质检',
				version: 'V1.0',
				status: '未发布',
				items: [{ name: '项目1', method: '化学分析' }, { name: '项目2', method: '化学分析' }]
			},
			{
				name: '建筑材料质检标准 8',
				type: '成品质检',
				version: 'V1.0',
				status: '发布',
				items: [{ name: '项目1', method: '物理检测' }, { name: '项目2', method: '物理检测' }]
			},
			{
				name: '建筑材料质检标准 9',
				type: '成品质检',
				version: 'V3.0',
				status: '发布',
				items: [{ name: '项目1', method: '视觉检测' }, { name: '项目2', method: '物理检测' }]
			},
			{
				name: '建筑材料质检标准 10',
				type: '成品质检',
				version: 'V2.0',
				status: '发布',
				items: [{ name: '项目1', method: '化学分析' }, { name: '项目2', method: '热学测试' }]
			}
		])


		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const drawerVisible = ref(false)
		const currentDetailItems = ref([])

		const viewItems = (row) => {
			drawerVisible.value = true
			currentDetailItems.value = row.items
		}

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增质检标准' : '编辑质检标准'
			dialogVisible.value = true
			if (type === 'edit') {
				currentIndex.value = standardList.value.findIndex(i => i.name === row.name)
				form.value = {
					name: row.name,
					type: row.type,
					version: row.version,
					status: row.status,
					items: row.items.map(i => i.name)
				}
			}else {
				form.value = { name: '', type: '', version: '', status: '', items: [] }
				currentIndex.value = -1
			}
		}

		const submitForm = () => {
			const selectedItems = qualityItemList.value.filter(item =>
				form.value.items.includes(item.name)
			)
			const newData = {
				name: form.value.name,
				type: form.value.type,
				version: form.value.version,
				status: form.value.status,
				items: selectedItems
			}
			if (currentIndex.value >= 0) {
				standardList.value[currentIndex.value] = newData
			} else {
				standardList.value.push(newData)
			}
			dialogVisible.value = false
		}

		const deleteStandard = (row) => {
			standardList.value = standardList.value.filter(i => i.name !== row.name)
		}

		return {
			standardList,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			submitForm,
			deleteStandard,
			qualityItemList,
			drawerVisible,
			viewItems,
			currentDetailItems
		}
	}
}
</script>

<style scoped>
.standard-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
